<template>
    <el-card class="box-card">
        <el-card class="box-form">
            <template #header>
                <div class="card-header">
                    <h3>图书管理系统</h3>
                </div>
            </template>
            <!-- ruleFormRef就是我们定义并使用各个属性的必要条件 -->
            <!-- :rules="rules"就是验证规则的实现 -->
            <el-form
                :model="form"
                label-width="120px"
                ref="ruleFormRef"
                :rules="rules"
            >
                <el-form-item label="用户名" prop="username">
                    <el-input
                        v-model="form.username"
                        placeholder="请输入用户名"
                    ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input
                        type="password"
                        v-model="form.password"
                        placeholder="请输入密码"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitLogin(ruleFormRef)">
                        登陆</el-button
                    >
                    <el-button type="info" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </el-card>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import notification from "../utils/notification";
import { login } from "../api/api";
import request from "../utils/request";
import useToken from "../store/token";

//import { ElNotification } from "element-plus";
const form = reactive({
    username: "",
    password: "",
});

const router = useRouter();
const { updateToken } = useToken();

const submitLogin = (formEl) => {
    formEl.validate(async (valid) => {
        if (valid) {
            console.log(form);
            const data = await login(form);
            if (data) {
                updateToken(data.token);
                //登录成功
                router.push({ name: "index" });
            }
        } else {
            notification({
                message: "用户名和密码格式不对",
            });
        }
    });
};

const reset = () => {};

const ruleFormRef = ref();
//定义规则
const rules = reactive({
    username: [
        {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
        },
        {
            min: 3,
            max: 5,
            message: "长度为3-5",
            trigger: "blur",
        },
    ],
    password: [
        {
            required: true,
            message: "请输入密码",
            trigger: "blur",
        },
        {
            min: 3,
            max: 8,
            message: "长度为3-8",
            trigger: "blur",
        },
    ],
});
</script>

<style lang="scss" scoped>
.box-card {
    height: 100%;
    background: rgba(38, 72, 176) url("/images/loginBg.jpg") center / cover
        no-repeat;
    .box-form {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 70%;
        max-width: 750px;
        transform: translate(-50%, -50%);
        .card-header {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .el-form {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .el-form-item {
                width: 70%;
                display: flex;
                align-items: center;
                justify-content: center;
                --el-form-label-font-size: 16px;
                margin-top: 15px;
                margin-bottom: 15px;
                .button {
                    width: 90px;
                }
                &.center {
                    display: flex;
                    justify-content: center;
                }
            }
        }
    }
}
</style>

